<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
       .box{
           width: 300px;
           /* height: 200px; */
           margin: 100px auto;
           border: 1px solid black;
       }
       ul{
           margin: 0;
           padding: 0;
           list-style: none;
       }
        a{
            text-decoration: none;
            font-size: inherit;
            color:inherit;
        }
        .outer{
            height: 30px;
            background-color: #666;
            line-height: 30px;
            display: flex;
            position: relative;
            color: white;
        }
        .outer>li{    
            padding: 0 15px;
        }
        .inner{
            /* position: absolute; */
            left: 120px;
            padding-top: 10px;
            text-align: center;
            /* display: none; */
        }
        .inner{
            display: none;
        }
        .first{
             display: block; 
        }
        .outer li:nth-child(1){
            background-color: black;
        }
    </style>
</head>
<body> 
    <div class="box">
        <ul class="outer">
            <li><a href="#">选项一</a></li>
            <li><a href="#">选项二</a></li>
            <li><a href="#">选项三</a></li>
        </ul>
        
           <div>
               <ul class="inner first">
                 <li><a href="#">选项一</a></li>
                 <li><a href="#">选项一</a></li>
                 <li><a href="#">选项一</a></li>
                </ul>
           <ul class="inner">
                 <li><a href="#">选项二</a></li>
                 <li><a href="#">选项2</a></li>
                 <li><a href="#">选项2</a></li>
                </ul>
            <ul class="inner">
                <li><a href="#">选项3</a></li>
                <li><a href="#">选项3</a></li>
                <li><a href="#">选项3</a></li>
                <li><a href="#">选项3</a></li>
                <li><a href="#">选项3</a></li>
                <li><a href="#">选项3</a></li>
                </ul>
           </div>
 
    </div>

    <script src="jquery-3.2.1.js"></script>
</body>
</html>
<script>
     var lis = $('.outer').find('li');
     var inner = $('.inner')
     console.log(inner)
    // 先选中每一个li
    lis.each(function(index){
        lis.eq(index).hover(function(){

        lis.eq(index).css('background-color','black')
        .siblings().css('background-color','#666');
        inner.eq(index).css('display','block').siblings().css('display','none');
        })
         
         
    })
</script>